<template>
  <div class="app-container">
    <vxe-form :data="formData">
      <vxe-form-item field="key">
        <template v-slot>
          <vxe-input v-model="formData.key" size="medium" placeholder="请输入流程Key" />
        </template>
      </vxe-form-item>
      <vxe-form-item field="name">
        <template v-slot>
          <vxe-input v-model="formData.name" size="medium" placeholder="请输入名称" />
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <template v-slot>
          <vxe-button type="submit" status="success" size="medium" @click="onSearchBtnClick">查询</vxe-button>
          <vxe-button type="reset" status="info" size="medium">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
    <vxe-toolbar :refresh="{query: onSearchBtnClick}">
      <template v-slot:buttons>
        <vxe-button v-auth="['admin','workflow:add']" size="medium" icon="el-icon-upload" status="primary" @click="onAddBtnClick">绘制模型</vxe-button>
        <vxe-button v-auth="['admin','workflow:add']" size="medium" icon="el-icon-delete" status="danger" :disabled="!multipleSelection.length" @click="onDeleteBtnClick">删除</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="table"
      border="inner"
      size="mini"
      :data="tableData"
      @checkbox-all="selectAllEvent"
      @checkbox-change="selectChangeEvent"
    >
      <vxe-table-column type="checkbox" width="50" />
      <vxe-table-column field="key" title="流程KEY" />
      <vxe-table-column field="name" title="流程名称" />
      <vxe-table-column field="version" title="版本" />
      <vxe-table-column v-slot="{ row }" title="状态">
        <template>
          <span>{{ row.suspendState!=1?'挂起':'激活' }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column field="deploymentTime" title="部署时间" />
      <vxe-table-column title="操作" show-overflow>
        <template v-slot="{ row }">
          <el-tooltip content="编辑" placement="bottom" effect="light">
            <vxe-button size="mini" icon="el-icon-edit" status="primary" @click="onlineModificationProcess(row)" />
          </el-tooltip>
          <el-tooltip v-if="row.suspendState===1" content="挂起" placement="bottom" effect="light">
            <vxe-button size="mini" icon="vxe-icon--refresh roll" status="warning" @click="onUpdateState(row,2,'挂起')" />
          </el-tooltip>
          <el-tooltip v-if="row.suspendState!==1" content="激活" placement="bottom" effect="light">
            <vxe-button size="mini" icon="vxe-icon--refresh roll" status="success" @click="onUpdateState(row,1,'激活')" />
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :current-page.sync="formData.currentPage"
      :page-size.sync="formData.pageSize"
      :total="total"
      :page-sizes="[10, 20, 100,200]"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />
    <el-dialog :visible.sync="isShow" :fullscreen="isFull">
      <Form
        v-if="detail"
        :key="keys"
        v-model="detail"
      />
    </el-dialog>
  </div>
</template>
<script>
import { modelers, del, updateState } from '@/api/activiti/definition'
import Form from './form'
export default {
  components: {
    Form
  },
  data() {
    return {
      keys: +new Date(),
      loading: false,
      isShow: false,
      isFull: true,
      formData: {
        currentPage: 1,
        pageSize: 10
      },
      tableData: [],
      multipleSelection: [],
      detail: null,
      total: 0,
      data: [],
      checked: []
    }
  },
  created() {
    // 开放一个窗口控制函数
    window['setIsShow'] = (val) => {
      this.isShow = val
      if (this.isShow === false) {
        this.onSearchBtnClick()
      }
    }
    this.onSearchBtnClick()
  },
  methods: {
    selectAllEvent({ records }) {
      this.multipleSelection = records
    },
    selectChangeEvent({ records }) {
      this.multipleSelection = records
    },
    onUpdateState(row, state, msg) {
      this.$confirm('确定' + msg + '吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = { id: row.id, suspendState: state }
        updateState(data).then(res => {
          this.onSearchBtnClick()
        })
      })
    },
    onAddBtnClick() {
      this.keys = +new Date()
      this.isShow = true
      this.detail = {}
    },
    onSearchBtnClick() {
      this.loading = true
      modelers(this.formData).then(data => {
        this.tableData = data.list
        this.total = data.total
        this.loading = false
      })
    },
    onlineModificationProcess(data) {
      // 更新表单
      this.keys = +new Date()
      this.isShow = true
      this.detail = data
    },
    onDeleteBtnClick() {
      this.$confirm('确定删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => this.deleteData())
    },
    async deleteData() {
      const selectRecords = this.$refs.table.getCheckboxRecords()
      await del(selectRecords.map(item => item.deploymentId))
      this.$notify({
        type: 'success',
        message: '删除成功!'
      })
      this.multipleSelection = []
      this.onSearchBtnClick()
    },
    handlePageChange({ currentPage, pageSize }) {
      this.formData.currentPage = currentPage
      this.formData.pageSize = pageSize
      this.onSearchBtnClick()
    }
  }
}
</script>
